let fade_img_addressArr = [
	'./img/fade1.jpg',
	'./img/fade2.jpg',
	'./img/fade3.jpg',
	'./img/fade4.jpg'
] // 遮罩菜单背景图地址
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 滚动条位置
let introduce_img_index = 1 // introduce组件的当前图片索引
let pathName = location.pathname // 浏览器当前的位置
let all_page_path = [
	'/index.html',
	'/concept.html',
	'/about.html',
	'/contact.html'
] // 所有路径
let page_index = all_page_path.indexOf(pathName) // 当前页面的索引
let shade_language = [
	['Home', 'Concept', 'About', 'Contact'],
	['主页', '概念', '关于', '联系']
]

// 节流
function throttle(fn, delay) {
	let timer = null
	return function () {
		if (timer) {
			return
		}

		timer = setTimeout(() => {
			fn.call(this) // 更改this指向，使它从window转为指向触发的事件对象
			timer = null
		}, delay)
	}
}

// 加载完成后判断是否在触发动画的位置
function load_exec_animation(scrollTop) {
	if (page_index != 2 && page_index != 3) {
		if (scrollTop >= 800 && $('#fold').length) {
			$('#fold').css('background-color', 'rgb(243,243,243)')
			$('#fold > img').attr('src', './img/fold_black.png')
		} else {
			$('#fold').css('background-color', 'rgb(0,0,0,0)')
			$('#fold > img').attr('src', './img/fold_white.png')
		}
	}

	// 移动到introduce时，动画展示信息
	if (scrollTop >= 300 && $('.carousel_template').length) {
		$('.carousel_template_introduce').slideDown(1000)
		$('.introduce').slideDown(1000)
		$('.arrow_group').eq(1).slideDown(1000)
	}

	// 移动展示about_item1
	if (
		scrollTop >= 2000 &&
		$('#concept_about > .concept_about_item > div > p').length &&
		$('#concept_about > .concept_about_item > img ').length
	) {
		move_concept_item(
			false,
			'#concept_about > .concept_about_item:nth-of-type(1) > div > p:nth-of-type(1)'
		)
		move_concept_item(
			false,
			'#concept_about > .concept_about_item:nth-of-type(1) > div > p:nth-of-type(2)'
		)

		move_concept_img(
			'#concept_about > .concept_about_item:nth-of-type(1) > img'
		)
	}

	// 移动展示about_item2
	if (
		scrollTop >= 3000 &&
		$('#concept_about > .concept_about_item > div > p').length &&
		$('#concept_about > .concept_about_item > img ').length
	) {
		move_concept_img(
			'#concept_about > .concept_about_item:nth-of-type(2) > img'
		)
		move_concept_item(
			true,
			'#concept_about > .concept_about_item:nth-of-type(2) > div > p:nth-of-type(1)'
		)
		move_concept_item(
			true,
			'#concept_about > .concept_about_item:nth-of-type(2) > div > p:nth-of-type(2)'
		)
	}
}

function cur_page(index) {
	$('#header > nav > ul > li > a').eq(index).css('opacity', 1)
	$('#shade_menu > li > a').eq(index).css('opacity', 1)
	$('.shade_bg_img').eq(0).attr('src', fade_img_addressArr[index])
}

// 加载后执行动画
function load_func() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			// 将下方遮罩层移动到上方-200%的位置，然后去把整个遮罩层移动
			$('#load_shade_item').animate(
				{
					top: '0%'
				},
				1000,
				() => {
					resolve(true)
				}
			)
		}, 500)
	})
}

// 轮播图片滑动
function move(isRight, obj, offset, speed) {
	return new Promise((resolve, reject) => {
		let length = 0 // 总共有多少图片
		if (isRight) {
			introduce_img_index++
		} else {
			introduce_img_index--
		}

		$(obj).each((index, val) => {
			$(val).animate(
				{
					left: `${-introduce_img_index * offset}vw`
				},
				speed,
				function () {
					length = $(obj).eq(index).find('img').length
					if (introduce_img_index >= length - 1) {
						// 在移动到最后一张图片时，在完成动画后，将display移动到第二张图片的位置（第一张是最后一张图片的重复），实现无缝切换
						$(val).css('left', `-${offset}vw`)
						// 如果不加判断，在第一个display执行到这儿的时候，就会把img_index置为0，导致第二个display不能正确的设置left为0
						if (index == $(obj).length - 1) {
							introduce_img_index = 1
						}
					}

					if (introduce_img_index <= 0) {
						// 在移动到第一张，在完成动画后，将display移动到倒数第二张的位置（最后一张是第一张图片的重复），实现无缝切换
						$(val).css('left', `${-(length - 2) * offset}vw`)
						// 如果不加判断，在第一个display执行到这儿的时候，就会把img_index置为0，导致第二个display不能正确的设置left为0
						if (index == $(obj).length - 1) {
							introduce_img_index = length - 2
						}
					}
					resolve(true)
				}
			)
		})
	})
}

// 移动展示concept_img中的图片
function move_concept_img(obj) {
	$(obj).animate(
		{
			top: 0
		},
		1000
	)
}

// 移动展示concept_img中的文字
function move_concept_item(isRight, obj) {
	if (isRight) {
		$(obj).animate(
			{
				'margin-left': '0'
			},
			1000
		)
	} else {
		$(obj).animate(
			{
				'margin-left': '0'
			},
			1000
		)
	}
}

// 按钮的背景颜色切换
function button_bg_move(box, bg) {
	$(box).mouseenter(() => {
		$(bg).animate(
			{
				top: 0
			},
			300
		)
	})

	$(box).mouseleave(() => {
		$(bg).animate(
			{
				top: '-101%'
			},
			300,
			() => {
				$(bg).css('top', '101%')
			}
		)
	})
}

// 获取需要懒加载的img
function query(selector) {
	return Array.from(document.querySelectorAll(selector))
}

// 创建IntersectionObserver对象，判断可见性，当可见后，再将真实的src赋值给图片，并且取消监听
var observer = new IntersectionObserver(function (changes) {
	changes.forEach(function (change) {
		// 判断是否出现在可视区，也可以用它来判断是否可见；
		if (change.isIntersecting) {
			// 模拟异步加载
			change.target.src = change.target.dataset.src
			observer.unobserve(change.target)
		}
	})
})

// 预加载
// 放在index里用了
function preloader(imgArr) {
	if (document.images) {
		// console.log(imgArr)
		imgArr.forEach((item, index) => {
			let img = new Image()
			img.src = item
		})
	}
}

// 判断是否已经有onload事件，如果没有，则直接将传入的func作为onload事件
// 如果有，则将原有onload事件和新传入的事件一起执行
// 记录一下写法，没用
function addLoadEvent(func) {
	var oldonload = window.onload
	if (typeof window.onload != 'function') {
		window.onload = func
	} else {
		window.onload = function () {
			if (oldonload) {
				oldonload()
			}
			func()
		}
	}
}
// 不执行
// addLoadEvent(preloader)

// 给需要懒加载的图片添加事件
query('.introduce-img').forEach(function (item) {
	observer.observe(item)
})

query('.product-img').forEach(function (item) {
	observer.observe(item)
})

// 导航栏文字高亮及隐藏菜单背景的切换
cur_page(page_index)

// 按钮动效
button_bg_move('#shade_go_box', '#shade_go_bg')

// 加载完动画后，展示信息
load_func().then(() => {
	// 执行完下方遮罩层动画后，移动整个遮罩层，并把整个遮罩层删除
	// 将标语展示出来
	$('#load_shade').animate(
		{
			top: '-100%'
		},
		500,
		() => {
			$('#load_shade').remove()
			setTimeout(() => {
				// 页面加载完成后将文字展示出来
				$('#header_slogan > div > p').animate(
					{
						top: 0,
						opacity: 1
					},
					800
				)
				if ($('.about_story_p_item > p ').length) {
					$('.about_story_p_item > p ').animate(
						{
							top: 0,
							opacity: 1
						},
						800
					)
				}
			}, 100)

			load_exec_animation(scrollTop)
		}
	)
})

// 滚到到指定地方，执行动画
$(window).scroll(() => {
	scrollTop = document.documentElement.scrollTop || document.body.scrollTop
	load_exec_animation(scrollTop)
})

// 改变语言
$('#switch_language > span').each((index, value) => {
	$(value).click(() => {
		$('#switch_language > span').each((i, v) => {
			$(v).removeClass('switch_language_highlight')
		})
		$(value).addClass('switch_language_highlight')
		$('#shade_menu > li >a').each((i, val) => {
			$(val).animate(
				{
					'margin-left': '100%'
				},
				500,
				() => {
					$(val).text(shade_language[index][i])
					$(val).css('margin-left', '-100%')
					$(val).animate(
						{
							'margin-left': '0'
						},
						500
					)
				}
			)
		})
	})
})

// 遮罩层导航栏背景切换
$('#shade_menu li >a').each((index, val) => {
	$(val).mouseenter(() => {
		if (!(index == page_index)) {
			$('.shade_bg_img').eq(0).fadeOut(300)
			$('.shade_bg_img').eq(1).attr('src', fade_img_addressArr[index])
			$('.shade_bg_img').eq(1).fadeIn(300)
		}
	})
})

$('#shade_menu li > a').each((index, val) => {
	$(val).mouseleave(() => {
		if (!(index == page_index)) {
			$('.shade_bg_img').eq(0).fadeIn(300)
			$('.shade_bg_img').eq(1).fadeOut(300)
		}
	})
})

// 遮罩层开启
$('#fold').click(() => {
	$('#shade').animate(
		{
			top: 0
		},
		700
	)
})

// 遮罩层关闭
$('#shade_close').click(() => {
	$('#shade').animate(
		{
			top: '-100%'
		},
		700,
		() => {
			$('#shade').css('top', '100%')
		}
	)
})

// 切换按钮鼠标移入移出的动效
$('.arrow_group_left').mouseenter(function () {
	$(this).find('.left_tempalte_bg').animate(
		{
			left: 0
		},
		300
	)
})

$('.arrow_group_left').mouseleave(function () {
	$(this)
		.find('.left_tempalte_bg')
		.animate(
			{
				left: '3vw'
			},
			300,
			function () {
				$(this).css('left', '-3vw')
			}
		)
})

$('.arrow_group_right').mouseenter(function () {
	$(this).find('.right_tempalte_bg').animate(
		{
			left: '0'
		},
		300
	)
})
$('.arrow_group_right').mouseleave(function () {
	$(this)
		.find('.right_tempalte_bg')
		.animate(
			{
				left: '3vw'
			},
			300,
			function () {
				$(this).css('left', '-3vw')
			}
		)
})

// footer按钮动效
$('#footer_go_home_group').mouseenter(() => {
	$('#footer_go_home_bg').animate(
		{
			top: 0
		},
		300
	)
})

$('#footer_go_home_group').mouseleave(function () {
	$('#footer_go_home_bg').animate(
		{
			top: '-100%'
		},
		300,
		function () {
			$('#footer_go_home_bg').css('top', '100%')
		}
	)
})

//遮罩层和底部按钮跳转
$('#footer_go_home_group,#shade_go_box,#header_logo').click(() => {
	window.location.href = '/index.html'
})
